<template>
<el-row class="wrap">
  <el-col :span="24" class="warp-breadcrum">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/dashboard' }"><span style="color: #837e7c;font-weight: normal;">首页</span></el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/2-1' }"><span style="color: #837e7c;font-weight: normal;">AI外呼</span></el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/2-1' }"><span style="color: #5d9cec;cursor: pointer;">AI外呼任务</span></el-breadcrumb-item>
    </el-breadcrumb>
  </el-col>
  <el-col :span="24" class="wrap-main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="gg-cardTitle" v-if="!isDetail">新建任务</span>
        <span class="gg-cardTitle" v-if="isDetail">任务详情</span>
        <div v-if="isDetail" class="gg-lineBtns">
          <el-button type="success" plain size="mini">完结任务</el-button>
          <el-button type="warning" plain size="mini">暂停任务</el-button>
        </div>
      </div>
      <div class="text item">
        <el-col :span="24" style="margin-left: 20%;">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="任务名称" prop="taskName">
              <el-input v-model="ruleForm.taskName" size="small" class="gg-formInput" :disabled="isDetail"></el-input>
            </el-form-item>
            <el-form-item label="AI流程" prop="AIName">
              <el-select v-model="ruleForm.AIName" placeholder="请选择AI流程" class="gg-formSelect" size="small" :disabled="isDetail">
                <el-option label="【内置】催收体验demo" value="0"></el-option>
                <el-option label="【内置】呼叫体验demo" value="1"></el-option>
              </el-select>
              <el-form-item label="" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="0" :disabled="isDetail">选择号码组</el-radio>
                  <el-radio label="1" @change="dialogFormVisible = true" :disabled="isDetail">导入新号码</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form-item>
            <el-form-item label="选择外呼号码组" prop="numGroup">
              <el-select v-model="ruleForm.numGroup" placeholder="请选择外呼号码组" class="gg-formSelect" size="small" :disabled="isDetail">
                <el-option label="逾期一天人员" value="0"></el-option>
                <el-option label="按期人员" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务启动" required>
              <el-col :span="24">
                <el-date-picker size="small" style="width: 180px;" type="date" placeholder="请选择日期" v-model="ruleForm.date1" class="gg-formInput" :disabled="isDetail"></el-date-picker>
                <el-time-select size="small" style="width: 160px;" placeholder="起始时间" v-model="ruleForm.startTime" :picker-options="{start: '00:00',step: '00:15',end: '23:45'}" :disabled="isDetail"></el-time-select>
                <el-time-select size="small" style="width: 160px;" placeholder="结束时间" v-model="ruleForm.endTime" :picker-options="{start: '00:00',step: '00:15',end: '23:45',minTime: ruleForm.startTime}" :disabled="isDetail"></el-time-select>
              </el-col>
            </el-form-item>
            <el-form-item label="AI外呼机器人" prop="jiqiren">
              <el-input size="small" v-model="ruleForm.jiqiren" type="number" step="1" min="1" class="gg-formInput" :disabled="isDetail"></el-input>
            </el-form-item>
            <el-form-item label="是否录音" prop="luyin">
              <el-radio-group v-model="ruleForm.luyin">
                <el-radio label="0" :disabled="isDetail">是</el-radio>
                <el-radio label="1" :disabled="isDetail">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="任务描述" prop="desc">
              <el-input style="width: 50%;" type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6}" v-model="ruleForm.desc" placeholder="请输入任务描述" :disabled="isDetail"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')" v-if="!isDetail" size="small">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')" v-if="!isDetail" size="small">重置</el-button>
              <el-button type="success" size="small" @click="goBackList()">返回</el-button>
            </el-form-item>
          </el-form>
        </el-col>


      </div>
    </el-card>
    <!--导入号码分组的模态框-->
    <el-dialog title="导入新号码" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="号码分组:" :label-width="formLabelWidth">
          <el-input class="gg-formInput" size="small" v-model="form.name" auto-complete="off" placeholder="请输入号码分组名称"></el-input>
        </el-form-item>
        <el-form-item label="分组描述:" :label-width="formLabelWidth">
          <el-input  class="gg-formInput" size="small" v-model="form.region" auto-complete="off" placeholder="请输入号码分组描述"></el-input>
        </el-form-item>
        <el-form-item label="导入号码:" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel/csv文件，其他格式目前不支持</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormInnerVisible=true">确 定</el-button>
      </div>
      <el-dialog
        width="30%"
        title="操作提示"
        :visible.sync="dialogFormInnerVisible"
        append-to-body>
        <div>
          <ul>
            <li>
              <span>总号码数:2</span>
            </li>
            <li>
              <span>成功导入:2</span>
            </li>
            <li>
              <span>重复号码:无</span>
            </li>
          </ul>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormInnerVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible=false,dialogFormInnerVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>

  </el-col>
</el-row>


</template>

<script>
    export default {
        name: "AddTask",
      data() {
          var isDetail = this.$route.params.isDetail;
          console.log(isDetail);
        return {
          ruleForm: {
            taskName: '',
            AIName: '',
            resource:'0',
            numGroup:'',
            date1: '',
            startTime: '',
            endTime: '',
            jiqiren:1,
            luyin:'',
            desc: '',
          },
          isDetail:isDetail,
          dialogFormVisible:false,
          dialogFormInnerVisible:false,
          rules: {
            taskName: [
              { required: true, message: '请输入任务名称', trigger: 'blur' },
              { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
            ],
            AIName: [
              { required: true, message: '请选择AI流程', trigger: 'change' }
            ],
            numGroup:[
              {required:true, message:'请选择外呼号码组',trigger:'change'}
            ],
            date1: [
              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            startTime: [
              { required: true, message: '请选择开始时间', trigger: 'blur' }
            ],
            endTime: [
              { required: true, message: '请选择结束时间', trigger: 'blur' }
            ],
            jiqiren: [
              { required: true, message: 'AI外呼机器人数至少为1个', trigger: 'blur' }
            ],
            luyin: [
              { required: true, message: '请选择是否录音', trigger: 'change' }
            ]
          },
          form: {
            name: '',
            region: '',
          },
          formLabelWidth: '120px'
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
             this.$confirm('当前选择流程文件为[悟空理财复投],号码组为[逾期一天人员]?','操作提示',{
               confirmButtonText:'确定',
               cancelButtonText:'取消',
               type:'warning'
             }).then(()=>{
               this.$message({
                 type:'success',
                 message:'新建任务成功!',
               })
             }).catch(()=>{
               this.$message({
                type:'info',
                 message:'已取消新建'
               })
             })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        goBackList:function(){
          this.$router.push("/2-1")
        }
      }
    }
</script>

<style scoped>
  .gg-formInput{
    width: 50%;
  }
  .gg-formSelect{
    width: 50%;
  }
  .gg-cardTitle{
    font-size: 16px;
    font-weight:bold;
  }
  .gg-lineBtns{
    display: inline-flex;
    margin-left: 20px;
  }
</style>
